<template>
  <div>
    <a
      v-if="domView"
      :disabled="loading"
      @click="uploadDo"
    >{{ $t('upload') }}</a>
    <a-progress
      class="progressCss"
      v-if="loading"
      :percent="percent"
    />
    <input
      v-show="false"
      type="file"
      @change="fileChange"
      ref="upload"
      :accept="accept?accept:'*'"
    />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import SparkMD5 from 'spark-md5'
export default {
  name: 'LocalUploader',
  props: {
    // 是否展示自带的”上传“字样
    domView: {
      type: Boolean,
      default: true
    },
    // 接受类型
    accept: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 是否在弹框中
    isInModel: {
      type: Boolean,
      default: false
    },
    // 父组件的信息
    loadData: {
      type: Object,
      default: null
    },
    // 上传进行中状态
    loading: {
      type: Boolean,
      default: false
    },
    // 进度
    percent: {
      type: Number,
      default: 0
    },
    // 限制大小
    size: {
      type: Number,
      default: 10000 * 1024 * 1024
    }
  },
  computed: {
    ...mapGetters(['toolFileReset']),
    acceptStr () {
      return this.accept.toString()
    }
  },
  data () {
    return {
      md5: undefined
    }
  },
  methods: {
    // 模拟点击上传
    uploadDo () {
      const uploadbtn = this.$refs.upload
      uploadbtn.click()
    },
    // 置空input
    resetUpload () {
      this.$refs.upload.value = ''
    },
    // 解析apk文件
    parsingApk (file) {
      const vm = this
      const AppInfoParser = require('app-info-parser')
      const parser = new AppInfoParser(file) // or xxx.ipa
      parser
        .parse()
        .then(result => {
          vm.$set(vm.loadData, 'packageName', result.package) // 包名称
          vm.$set(vm.loadData, 'versionCode', result.versionCode) // 版本编号
          vm.$set(vm.loadData, 'versionName', result.versionName) // 版本号
          vm.$set(vm.loadData, 'minSdkVersion', result.usesSdk.minSdkVersion) // 系统要求
          vm.$set(vm.loadData, 'appName', result.application.label[0]) // 应用名称
        })
        .catch(err => {
          console.log('err ----> ', err)
        })
    },
    fileMd5 (md5) {
      this.md5 = md5
    },
    fileChange (event) {
      // eslint-disable-next-line prefer-destructuring
      const file = event.target.files[0]
      const _this = this
      this.resetUpload() // 重置input
      const length1 = file.name.lastIndexOf('.') // 取到文件名开始到最后一个点的长度
      const { length } = file.name // 文件名总长度
      const fileFormat = file.name.substring(length1, length) // 截取文件格式
      //   进行格式判断
      if (_this.accept.length > 0) {
        // eslint-disable-next-line no-unused-vars
        const tag = _this.accept.findIndex((value, index, arr) => {
          return value === fileFormat
        })
        if (tag === -1) {
          this.$message.warning(`${_this.$t('pleaseUpload')} ${_this.acceptStr} ${_this.$t('typesOf')}`)
          return
        }
      }
      //   限制大小
      if (_this.size && _this.size < file.size) {
        this.$message.warning(`${_this.$t('fileSizeLimit')}${_this.size / 1024 / 1024}M`)
        return
      }
      const spark = new SparkMD5.ArrayBuffer()
      const fr = new FileReader()
      const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
      let currentChunk = 0
      const chunkSize = 30 * 1024 * 1024
      const chunks = Math.ceil(file.size / chunkSize)
      fr.onload = function (e) {
        spark.append(e.target.result) // Append array buffer
        currentChunk = currentChunk + 1
        if (currentChunk < chunks) {
          loadNext()
        } else {
          _this.fileMd5(spark.end())
          // 更新父组件的信息
          if (_this.loadData) {
            _this.$set(_this.loadData, 'md5', _this.md5) // md5
            _this.$set(_this.loadData, 'fileName', file.name) // 文件名
          }
          // 解析apk信息
          if (fileFormat === '.apk') {
            _this.parsingApk(file)
          }
          // 把文件回传给父组件
          _this.$emit('showFileObj', file)
        }
      }
      fr.onerror = function () {
        _this.$message.error('文件上传出错，请重试')
      }
      function loadNext () {
        const start = currentChunk * chunkSize
        const end = start + chunkSize >= file.size ? file.size : start + chunkSize

        fr.readAsArrayBuffer(blobSlice.call(file, start, end))
      }

      loadNext()
    }
  },
  watch: {
    toolFileReset (value) {
      // 弹框关闭 上传置空
      if (this.isInModel && !value) {
        this.$refs.upload.value = '' // 置空上传
      }
    }
  }
}
</script>
